<template>
	<scroll-view class="scroll" :scroll-y="isScroll">
		<view class="container-wrapper">
			<navigation-custom :config="config" :wrapperStyle="wrapperStyle" :scrollTop="scrollTop" @customConduct="customConduct"
			 :scrollMaxHeight="scrollMaxHeight" />
			<common-list isWorkDetail :item="workInfo" :index="index">
				<view slot="tags" class="tags-slot u-f-ac">
					<image v-if="static('tag')" :src="static('tag')"></image>
					<view class="tags">
						<text class="tag" :key="tag" v-for="tag in tags">{{tag}}
						</text>
					</view>
				</view>
			</common-list>
			<view class="detail-opts u-f-ac u-f-jsb">
				<part-icon @iconTap="changeLike" desc="喜欢" :iconClasses="likeInconClasses" />
				<part-icon @iconTap="openShare" desc="分享" :iconClasses="['iconfenxiang']" />
			</view>
			<view class="join-huati">
				<view class="join-text">参与话题</view>
				<index-item-hd @opendetail="opendetail" :itemInfo="topicInfo" />
			</view>
			<!-- 评论区 -->
			<view class="comment-wraper">
				<view class="comment-wraper-text">
					<text>评论</text> {{reviewMsg.length || '暂无评论' }}
				</view>
				<review :reviewMsg="reviewMsg" @childReview="childReview" :childData="childData"></review>
			</view>
			<comment ref="comment" @submit="submit"  opts :likeInconClasses="likeInconClasses" :workInfo="workInfo" @openShare="openShare" @changeLike="changeLike">
			</comment>
			<!-- 分享 -->
			<share ref="share" :poster="poster" />
		</view>

	</scroll-view>
</template>

<script>
	import navigationCustom from "@/components/common/navigation-custom.vue";
	import commonList from "@/components/work/common-list.vue";
	import indexItemHd from "@/components/index/index-item-hd";
	import review from '@/components/dl-review/review.vue';
	import share from "@/components/common/share.vue";
	import partIcon from "@/components/common/part/part-icon.vue";
	import comment from "@/components/work/comment.vue";
	import workMapper from "@/mapper/work/work.js";
	import commentMapper from "@/mapper/work/comment.js";
	export default {
		components: {
			commonList,
			indexItemHd,
			review,
			share,
			navigationCustom,
			partIcon,
			comment
		},
		data() {
			return {
				// 提交评论的数据
				submitData: {
					content: '',
					top_id: '',
					parent_id: ''
				},
				tags: [],
				workId: '',
				adjustPosition: true,
				isScroll: true,
				commentText: '',
				// 自定义导航栏
				config: {
					title: "画友星球", //title
					bgcolor: "#fff", //背景颜色
					fontcolor: "#000", //文字颜色，默认白色
					type: 2, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: true, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					// menuIcon:"../static/icon/back_.png", 当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", 当type为3或4的时候icon右边的文字,

				},
				wrapperStyle: {
					height: 128,
					backgroundColor: '#fff'
				},
				scrollTop: 200, // 当linear为true的时候需要通过onpagescroll传递参数
				scrollMaxHeight: 200, //滑动的高度限制，超过这个高度即背景全部显示
				// 分享海报
				poster: {

				},

				workInfo: {},
				topicInfo:{},
				comment: {
					page: 1
				},

				// 列表详情数据
				childData: [],
				// 评论列表
				reviewMsg: []
			};
		},
		onLoad(option) {
			this.workId = option.workIndex;
		},
		mounted() {
			uni.showLoading({
				title: 'loading...'
			})
			this.initData()
		},
		onShareAppMessage(res) {
			return {
				title: '微信小程序测试分享',
				path: '/pages/work/work_detail/work_detail'
			}
		},
		computed: {
			likeInconClasses() {
				let target = ['iconxihuan'];
				return this.workInfo.i_like ? ['iconxihuan', 'liked'] : target;
			}


		},
		watch: {
			workInfo(val) {
				this.tags = val.tags.map(item => item.label)
			}
		},
		methods: {
			async initData() {
				// 作品信息
				let data = await workMapper.getWorkDetail(this.workId);
				this.workInfo = data.data;
				if (!this.workInfo.summary) {
					this.workInfo.summary = ''
				}
				// 海报信息
				this.poster = {
					author: this.workInfo.user.nickname,
					src: this.workInfo.multimedia.cover.url,
					desc: this.workInfo.summary
				}
				// 话题信息
				this.topicInfo = this.workInfo.topic
				// 评论信息
				let comment = await commentMapper.getIndex(this.workId, this.comment.page);
				// 提交评论信息
				this.submitData.top_id = this.workId;
				this.submitData.parent_id = this.workInfo.user_id;
				// this.reviewMsg = comment.data;
				this.reviewMsg = [{
						"user_id": 1, //用户ID
						"reply_id": null, //被回复人的ID
						"msg_id": null, //被回复的评论的ID
						"parent_id": null, //该评论的顶级评论
						"content": "fsdf", //评论内容
						"reply_num": 0, //被回复数
						"created_at": "2018-11-23 16:09:16", //添加时间
						"message_id": 1, //当前评论ID
						"publish_at": "11月23日",
						"reply_num": 10,
						"user": {
							"nickname": "飞轮海", //发布人的ID
							"gender": "male",
							"avatar": this.static('1', '.jpg') //头像
						},
						"reply": null, //被回复的用户，顶层没有该信息，结构同user字段
						"messages": [{
								"user_id": 669826,
								"reply_id": 1,
								"msg_id": 1,
								"parent_id": 1,
								"content": "fsdf",
								"reply_num": 0,
								"created_at": "2018-11-23 16:09:16",
								"message_id": 2,
								"publish_at": "11月23日",
								"user": {
									"nickname": "周董",
									"gender": "female",
									"avatar": this.static('1', '.jpg')
								},
								"reply": {
									"nickname": "飞轮海",
									"gender": "male",
									"avatar": this.static('1', '.jpg')
								}
							},
							{
								"user_id": 1,
								"reply_id": 669826,
								"msg_id": 2,
								"parent_id": 1,
								"content": "fsdf",
								"reply_num": 0,
								"created_at": "2018-11-23 16:09:16",
								"message_id": 3,
								"publish_at": "11月23日",
								"user": {
									"nickname": "飞轮海",
									"gender": "male",
									"avatar": this.static('1', '.jpg')
								},
								"reply": {
									"nickname": "周董",
									"gender": "female",
									"avatar": this.static('1', '.jpg')
								}
							}, {
								"user_id": 669826,
								"reply_id": 1,
								"msg_id": 1,
								"parent_id": 1,
								"content": "fsdf",
								"reply_num": 0,
								"created_at": "2018-11-23 16:09:16",
								"message_id": 2,
								"publish_at": "11月23日",
								"user": {
									"nickname": "周董",
									"gender": "female",
									"avatar": this.static('1', '.jpg')
								},
								"reply": {
									"nickname": "飞轮海",
									"gender": "male",
									"avatar": this.static('1', '.jpg')
								}
							},
							{
								"user_id": 1,
								"reply_id": 669826,
								"msg_id": 2,
								"parent_id": 1,
								"content": "fsdf",
								"reply_num": 0,
								"created_at": "2018-11-23 16:09:16",
								"message_id": 3,
								"publish_at": "11月23日",
								"user": {
									"nickname": "飞轮海",
									"gender": "male",
									"avatar": this.static('1', '.jpg')
								},
								"reply": {
									"nickname": "周董",
									"gender": "female",
									"avatar": this.static('1', '.jpg')
								}
							}
						]
					},
					{
						"user_id": 669826,
						"reply_id": null,
						"msg_id": null,
						"parent_id": null,
						"content": "fsdf",
						"reply_num": 0,
						"created_at": "2018-11-23 16:09:16",
						"message_id": 5,
						"publish_at": "11月23日",
						"user": {
							"nickname": "周董",
							"gender": "female",
							"avatar": this.static('1', '.jpg')
						},
						"reply": null,
						"messages": [{
							"user_id": 1,
							"reply_id": 669826,
							"msg_id": 5,
							"parent_id": 5,
							"content": "fsdf",
							"reply_num": 0,
							"created_at": "2018-11-23 16:09:16",
							"message_id": 6,
							"publish_at": "11月23日",
							"user": {
								"nickname": "飞轮海",
								"gender": "male",
								"avatar": this.static('1', '.jpg')
							},
							"reply": {
								"nickname": "周董",
								"gender": "female",
								"avatar": this.static('1', '.jpg')
							}
						}]
					}
				]

				uni.hideLoading()
			},
			changeLike(workIndex) {
				this.workInfo.i_like = !this.workInfo.i_like;
			},
			// 分享
			openShare() {
				// 需要在 popup 组件，指定 ref 为 popup
				this.$refs.share.open();
				this.isScroll = false;
				
			},
			
			// 路由,跳轉話題詳情
			opendetail(huatiIndex) {
				uni.navigateTo({
					url: `huati/huati_detail/huati_detail?index=${huatiIndex}`,
				});
			},
			// api 添加評論
			async submit(content) {
				function insert(reviewMsgItem,newMsg){
					if(reviewMsgItem.user_id == newMsg.parent_id){
						reviewMsgItem.messages.push(newMsg);
						return;
					}
					
				}
				if (!content) {
					return uni.showToast({
						title: '请输入你要发送的消息~',
						icon: 'none'
					});
				}
				uni.showLoading({
					title:'评论中...'
				})
				// api 保存评论
				this.submitData.content = content;
				let data = await commentMapper.reply(this.submitData);
				
				// 遍历  找到回复的对象 新增
				this.reviewMsg.forEach(item=>{
					insert(item,data.data)
				})
				this.$refs.comment.commentText = '';
				uni.hideLoading()
			},
		}

	}
</script>

<style lang="scss">
	page {
		height: 100%;
		overflow-y:hidden;
		.scroll {
			height: 100%;
		}
	}

	.container-wrapper {
		background-color: $c4;
		height: 100%;
	}

	// 标签
	.tags-slot {
		margin-top: 30upx;
		margin-bottom: 30upx;

		>image {
			width: 32upx;
			height: 32upx;
			margin-right: 10upx;
		}

		.tags {
			line-height: 58upx;
			overflow-x: scroll;
			flex: 1;
			white-space: nowrap; // 不让它换行
			padding-left: 6upx;
			border-left: 4upx solid #FFD7CF;

			.tag {
				padding: 0upx 22upx !important;
				font-size: 24upx;
			}
		}
	}

	// 参与话题
	.join-huati {
		background-color: #fff;
		padding: 20upx 32upx;
		margin-bottom: 15upx;

		>.join-text {
			font-size: 26upx;
			color: $a1;
			padding-bottom: 17upx;

		}
	}

	// 评论
	.comment-wraper {
		background-color: #fff;
		padding-top: 32upx;

		>.comment-wraper-text {
			padding-left: 33upx;
			padding-bottom: 52upx;
			border-bottom: 1upx solid #E6E6E6;
			color: #1E1A1A;
			font-size: 30upx;

			>text {
				margin-right: 20upx;
			}
		}
	}

	.detail-opts {
		background-color: #fff;
		justify-content: space-around;
		color: #8C8C8C;
		font-size: 28upx;
		height: 101upx;
		margin-bottom: 15upx;

		.iconxihuan {
			&.liked {
				color: $a4;
			}
		}

		view {
			margin-right: 6upx;

		}
	}

	.iconxihuan {
		&.liked {
			color: $a4;
		}
	}

	// 发送框
	.comment-area {
		&.commentting {
			position: absolute;
			background-color: rgba(247, 247, 247, 1);
			padding-top: 26upx;

			>textarea {
				background-color: #fff;
				width: 576upx;
				height: 165upx;
				background: rgba(255, 255, 255, 1);
				border-radius: 4upx;
				padding: 18upx 22upx;
				margin-right: 24upx;
			}

			>view {
				color: #B3B3B3;
				font-size: 22upx;
				height: 200upx;
				flex-direction: column-reverse;

				text {
					font-size: 32upx;

					&.can-submit {
						color: $a1;
					}
				}

				&:before {
					content: '';
				}
			}
		}

		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 11upx 20upx;
		background: #FFFFFF;
		box-shadow:0px -2upx 15upx 0upx rgba(0, 0, 0, 0.04);

		>.input {
			padding: 18upx 22upx;
			width: 394upx;
			line-height: 40upx;
			color: #B3B3B3;
			background: rgba(247, 247, 247, 1);
			border-radius: 36upx;
		}
	}
</style>
